<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	    <title>秒杀 - websocket</title>
	
	    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
	    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
	    
	    <script>if (window.top !== window.self) {
	        window.top.location = window.location;
	    }</script>
	    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
	    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
	    <!-- jquery-validator -->
	    <script type="text/javascript" src="${ctxPath}/static/plugins/jquery-validation/jquery.validate.min.js"></script>
	    <script type="text/javascript" src="${ctxPath}/static/plugins/jquery-validation/localization/messages_zh.min.js"></script>
	    <!-- layer -->
	    <script type="text/javascript" src="${ctxPath}/static/plugins/layer/layer.js"></script>    
	</head>
	
	<body class="gray-bg">
	
		<div class="text-center loginscreen animated fadeInDown">
		    <div style="padding: 100px 0px;">
		        <div>
		            <h1 class="logo-name">首页</h1>
		        </div>

		        <br/><br/><br/><br/><br/><br/><br/><br/>
      
				<div style="width:30%; margin:0 auto;">

					<div class="form-group">
				       	<div class="row">
					       	<label class="form-label col-md-4">手机号码</label>
					        <div class="col-md-8">
					        	<input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true" value="" minlength="11" maxlength="11" />
					    	</div>
					    	<div class="col-md-1">
					    	</div>
				    	</div>
				    </div>
				    
				    <div class="form-group">
				     		<div class="row">
						        <label class="form-label col-md-4">token</label>
						        <div class="col-md-8">
						        	<input id="token" name="token" class="form-control" type="password"  placeholder="密码" required="true" value="" minlength="6" maxlength="55" />
					       		</div>
				      		</div>
					</div>
					
				</div>		        
		    </div>
		</div>

	</body>
</html>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="${ctxPath}/static/modular/common.js"></script> 
<!-- websocket收取异步消息 -->
<script>
	function webSocketFun(phone, token) {
		// alert(phone + " - " + token);
		
		var websocket = null;
		if('WebSocket' in window) {		
			// websocket协议  + 域名   + 项目名   +    访问的接口     +     用户标识
			// websocket = new WebSocket('ws://localhost:8085/springbootstudy/webSocket/' + phone + '/' + token);
			
			var address = g_address + "${ctxPath}";
			websocket = new WebSocket('ws://' + address + '/webSocket/' + phone + '/' + token);
		} else {
			alert('该浏览器不支持websocket!');
		}

		websocket.onopen = function (event) {
			alert('建立连接');
		}

		websocket.onclose = function (event) {
			alert('连接关闭');
		}

		websocket.onmessage = function (event) {
			
			// alert(event.data);
			// layer.msg(event.data);
			
			var obj = JSON.parse(event.data); //由JSON字符串转换为JSON对象

			alert('用户' + obj.sessionRedis.user.phone + '生日是' + obj.sessionRedis.user.birthday);
			// 弹窗提醒
			layer.msg('用户' + obj.sessionRedis.user.phone + '生日是' + obj.sessionRedis.user.birthday);
		}

		websocket.onerror = function () {
			alert('websocket通信发生错误！');
		}

		window.onbeforeunload = function () {
			// 窗口关闭的时候关闭websocket
			websocket.close();
		}		
	}
	
	function loadData() {
		g_showLoading();

		$.ajax({
			url: "${ctxPath}/data/webSocketData",
		    type: "POST",
		    contentType: "application/json;charset=UTF-8",
		    data: JSON.stringify({
		    }),
		    success: function(data) {
		    	g_removeLoading();
		    	
		    	if (data.code == 0) {
		    		var phone = data.data.phone;
		    		var token = data.data.token;
		    		
		    		$('#phone').val(phone);
		    		$('#token').val(token);
		    		
		    		// websocket用于异步通知
		    		webSocketFun(phone, token);		    		
		    	} else {
		    		layer.msg(data.msg);
		    	}
		    },
		    error: function(){
		    	g_removeLoading();
		    }
		});		
	}	
	
	$(function () {
		// 加载数据
		loadData();
	});	

</script>	